<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			 min-width属性：最小宽度 [√]     min-height属性：最大高度
			 max-width属性：最大宽度 [√]        max-height属性：最大高度
			 */
			div{
				width: 80%;/*默认宽度*/
				min-width: 500px;/*内容最小宽度是500px,不能改变*/
				max-width: 800px;/*页面尺寸:最小是500px,最大是800px,默认80%*/
				/* 定好最小跟最大宽高,PC:80%  300px
				                  移动 500~600宽度【页面不变】300px
								  自适应
				 */
				height: 300px;
				background: #55ffff;
			}
			/**
			 * html结构    外层div--container    内层div--.box  写lorem+tap键
			 * css结构     .container样式：背景颜色#f0f0f0;
			 *                            padding:20px
			 *                            文本居中
			 *            .box样式：背景颜色#4caf50;
			 *                      文字改下颜色：白色
			 *                      宽度60%
			 *                    宽度范围：500~600px【页面不变】
			 *                       magin:auto;
			 */
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium fugiat sapiente ut deserunt pariatur accusamus vel adipisci tempore corporis! Perspiciatis exercitationem impedit veniam. Ea voluptate eaque, excepturi nesciunt maxime error?</div>
	</body>
</html>